<template>
    <div class="resource_form_container">
        <el-form ref="resourceForm" :rules="rules" :model="formData" label-width="100px" v-enterToNext>
            <el-form-item label="上级资源" prop="parent_sid">
                <tree-select v-bind.sync="treeSelectOption" @input="selectTree" />
            </el-form-item>
            <el-form-item label="资源类型" prop="res_type">
                <el-radio-group v-model="formData.res_type" @change="changeResType" :disabled="formData.id != null">
                    <el-radio v-for="opt in resTypeList" :key="opt.code" :label="opt.code">
                        {{ opt.name }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="资源名称" prop="name">
                <el-input v-model="formData.name" autocomplete="off" placeholder="请输入资源名称"></el-input>
            </el-form-item>
            <el-form-item label="资源编码" prop="code">
                <el-input v-model="formData.code" autocomplete="off" placeholder="请输入资源编码" :disabled="formData.id != null && formData.pre_set == 1"/>
            </el-form-item>
            <el-form-item label="权限标识" prop="permission" v-if="['button', 'right'].indexOf(formData.res_type) !== -1" >
                <el-input v-model="formData.permission" autocomplete="off" placeholder="请输入权限标识" :disabled="formData.id != null"></el-input>
            </el-form-item>
            <el-form-item label="请求地址" :prop="['menu'].indexOf(formData.res_type) !== -1 ? 'target_url' : ''">
                <el-input v-model="formData.target_url" autocomplete="off" placeholder="请输入请求地址" :disabled="formData.id != null && formData.pre_set == 1"
                          keyFocusTo="sn"/>
            </el-form-item>
            <el-form-item label="显示模式" prop="target_display_mode" v-if="formData.res_type === 'menu'">
                <el-radio-group v-model="formData.target_display_mode">
                    <el-radio label="div">div</el-radio>
                    <el-radio label="iframe">iframe</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="资源图标" prop="icon_url">
                <icon-picker v-model="formData.icon_url"
                             style="width: calc(100% - 40px);float: left;"></icon-picker>
                <el-color-picker v-model="formData.icon_color" show-alpha
                                 style="float: right;"></el-color-picker>
            </el-form-item>
            <el-form-item label="资源状态" prop="state">
                <el-radio-group v-model="formData.state">
                    <el-radio :label="1">有效</el-radio>
                    <el-radio :label="-1">无效</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="显示顺序" prop="sn">
                <el-input v-model="formData.sn" autocomplete="off" placeholder="请输入显示顺序" ref="sn"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "ResourceForm",
    props: {
        propsData: {
            type: Object,
            default() {
                return {
                    init: true,
                };
            },
        },
    },
    data() {
        const _this = this;
        let validatePermission = (rule, value, callback) => {
            if (_this.formData.res_type === 'button') {
                if (_this.$utils.isNotEmpty(value)) {
                    callback();
                } else {
                    callback('请输入权限标识');
                }
            } else {
                callback();
            }
        };
        let validateTargetUrl = (rule, value, callback) => {
            if (_this.formData.res_type !== 'button') {
                if (_this.$utils.isNotEmpty(value)) {
                    callback();
                } else {
                    callback('请输入请求地址');
                }
            } else {
                callback();
            }
        };
        return {
            treeSelectOption: {
                defaultExpandLevel: -1,
                clearable: false,
                zIndex: 999999,
                appendToBody: true,
                options: [],
            },
            rules: {
                res_type: [ { required: true, message: '请选择资源类型', trigger: 'blur' } ],
                name: [ { required: true, message: '请输入资源名称', trigger: 'blur' } ],
                code: [ { required: true, message: '请输入资源编码', trigger: 'blur' } ],
                permission: [ { required: true, validator: validatePermission, trigger: 'blur' } ],
                target_url: [ { required: true, validator: validateTargetUrl, trigger: 'blur' } ],
            },
            formData: {},
        };
    },
    computed: {
        ...mapState('system', [ 'resTypeList' ]),
    },
    watch: {
        propsData: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (_this.propsData.init) {
                return;
            }
            if (_this.$refs.resourceForm) {
                _this.$refs.resourceForm.clearValidate();
            }
            _this.formData = $.extend({}, _this.propsData.row);
            let options = [
                {
                    id: '-1',
                    label: '根节点',
                    children: _this.transferTreeData(_this.propsData.resourceTree),
                },
            ];
            _this.treeSelectOption = $.extend({}, _this.treeSelectOption, {
                options,
                value: _this.formData.parent_sid,
                disabled: _this.$utils.isNotEmpty(_this.formData.id),
            });
        },
        transferTreeData(datas) {
            const _this = this;
            let list = [];
            if (_this.$utils.isNotEmptyList(datas)) {
                list = datas.map(item => {
                    let obj = {};
                    obj.id = item.sid;
                    obj.label = item.name;
                    obj.res_type = item.res_type;
                    obj.isDefaultExpanded = true;
                    if (_this.$utils.isNotEmptyList(item.childrens)) {
                        let children = _this.transferTreeData(item.childrens);
                        let filter = children.filter(item => item.res_type !== 'button');
                        if (_this.$utils.isNotEmptyList(filter)) {
                            obj.children = filter;
                        }
                    }
                    return obj;
                });
            }
            return list;
        },
        selectTree(value) {
            this.formData = $.extend({}, this.formData, {
                parent_sid: value,
            });
        },
        changeResType() {
            if (this.$refs['resourceForm']) {
                this.$refs['resourceForm'].clearValidate();
            }
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('resourceForm');
            if (valid) {
                let subData = $.extend({}, _this.formData);
                return _this.fetchData(_this.$api.API_SaveSysResource, subData).then(() => {
                    _this.$message.success('保存成功！');
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.resource_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>

